<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-text="time"></p>
      <button @click="start" :disabled="isDisabled">开始</button>
      <button @click="pause" :disabled="!isDisabled">停止</button>
      <button @click="restart">重置游戏</button>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        time: "请点击开始按钮",
        isDisabled: false,
        timer: null,
      },
      methods: {
        start() {
          var starttime = Date.now();
          this.time = Date.now() - starttime;
          this.isDisabled = !this.isDisabled;
          this.timer = setInterval(() => {
            this.time = ((Date.now() - starttime) / 1000).toFixed(2);
            if (this.time >= 12) {
              clearInterval(this.timer);
              alert("U LOSE");
              this.time = "请再次尝试";
            }
          }, 0);
        },
        pause() {
          this.isDisabled = !this.isDisabled;
          clearInterval(this.timer);
          if (this.time != 10.0) {
            alert("U LOSE");
            this.time = "请再次尝试";
          } else {
            alert("U WIN");
          }
        },
        restart() {
          this.isDisabled = false;
          clearInterval(this.timer);
          this.time = "请再次尝试";
        },
      },
    });
  </script>
</html>
